{% extends "::base.html.twig" %}

{% trans_default_domain 'FOSUserBundle' %}

{% block subtitle %}Identification{% endblock subtitle %}

{% block stylesheets %}
    {% stylesheets filter='cssrewrite' 
        '@SmUserBundle/Resources/public/css/*'
        'css/css/style.css' %}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
{% endblock stylesheets %}

{% block body %}
    {% block fos_user_content %}
    {% if error %}
        <div>{{ error|trans }}</div>
    {% endif %}

<form action="{{ path("fos_user_security_check") }}" method="post" class="form-horizontal">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
    <input type="hidden" name="_target_path" value="{{ app.request.headers.get('referer') }}"/>
    
    <fieldset>
        <hr class="colorgraph">

        <div class="form-group">
            <input type="text" placeholder="Nom d'utilisateur" class="form-control input-lg" id="username" name="_username" value="{{ last_username }}" required="required" />
        </div>
        <div class="form-group">
            <input type="password" placeholder="Mot de passe" class="form-control input-lg" id="password" name="_password" required="required" />
        </div>
        <span class="button-checkbox">
            <button data-color="info" class="btn btn-info active" type="button"><i class="state-icon glyphicon glyphicon-check"></i>&nbsp;Se souvenir de moi</button>
            <input type="checkbox" class="hidden" id="remember_me" name="_remember_me"/>
            <a class="btn btn-link pull-right" href="{{ path('fos_user_resetting_request') }}">Mot de passe oublié ?</a>
        </span>

        <hr class="colorgraph">

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <input type="submit" class="btn btn-lg btn-success btn-block" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6">
                <a href="{{ path('fos_user_registration_register') }}" class="btn btn-lg btn-primary btn-block">S'inscrire</a>
            </div>
        </div>

    </fieldset>
</form>

    {% endblock fos_user_content %}
{% endblock body %}        

{% block javascripts %}
<script type="text/javascript">
        $(function(){
    $('.button-checkbox').each(function(){
                var $widget = $(this),
                        $button = $widget.find('button'),
                        $checkbox = $widget.find('input:checkbox'),
                        color = $button.data('color'),
                        settings = {
                            on: {
                                icon: 'glyphicon glyphicon-check'
                            },
                            off: {
                                icon: 'glyphicon glyphicon-unchecked'
                            }
                        };

                $button.on('click', function () {
                        $checkbox.prop('checked', !$checkbox.is(':checked'));
                        $checkbox.triggerHandler('change');
                        updateDisplay();
                });

                $checkbox.on('change', function () {
                        updateDisplay();
                });

                function updateDisplay() {
                        var isChecked = $checkbox.is(':checked');
                        // Set the button's state
                        $button.data('state', (isChecked) ? "on" : "off");

                        // Set the button's icon
                        $button.find('.state-icon')
                                .removeClass()
                                .addClass('state-icon ' + settings[$button.data('state')].icon);

                        // Update the button's color
                        if (isChecked) {
                                $button
                                    .removeClass('btn-default')
                                    .addClass('btn-' + color + ' active');
                        }
                        else
                        {
                                $button
                                    .removeClass('btn-' + color + ' active')
                                    .addClass('btn-default');
                        }
                }
                function init() {
                        updateDisplay();
                        // Inject the icon if applicable
                        if ($button.find('.state-icon').length == 0) {
                                $button.prepend('&lt;i class="state-icon ' + settings[$button.data('state')].icon + '"&gt;&lt;/i&gt;&nbsp;');
                        }
                }
                init();
        });
});	</script>
{% endblock javascripts %}
